<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>血氧濃度計</title>
  <style type="text/css">
    body {
      background: rgb(42, 42, 42);
      font-family: Microsoft JhengHei;
    }

    .button {
      background-color: #919191;
      border: none;
      width: 180px;
      height: 90px;
      color: white;

      text-align: center;
      font-size: 50px;

      cursor: pointer;
      border-radius: 50px;
      margin-top: 50px;
    }

    .preventcopy {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    p {
      font-size: 40px;
      color: white;
      margin: 10px 0px;
    }

    .title {
      color: rgb(255, 255, 255);
      font-size: 50px;
      margin-top: 20%;
    }

    .num {
      color: rgb(231, 251, 44);
      font-size: 120px;
      margin-bottom: 20px;
      display: inline-block;
    }

    .ruler1 {
      color: rgb(255, 115, 0);
      font-size: 40px;
    }

    .ruler2 {
      color: white;
      font-size: 40px;
    }

    p1 {
      font-size: 30px;
      color: white;
    }

    div {
      text-align: center;
    }
  </style>

  <script type="text/javascript">
    var value = 0;
    var isrun = false;

    function getvalue() {
      if (isrun) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            value = parseInt(this.responseText);
          }
        };
        xhttp.open("GET", "/measure", true);
        xhttp.send();
        if (value == 0) {
          document.getElementById("snum").innerHTML = "--";
          document.getElementById("r1").innerHTML = "";
          document.getElementById("r2").innerHTML = "▁ ▂ ▃ ▅ ▆ ▇";
        }
        else {
          document.getElementById("snum").innerHTML = value;
          if (value > 0 && value <= 18) {
            document.getElementById("r1").innerHTML = "▁ ";
            document.getElementById("r2").innerHTML = "▂ ▃ ▅ ▆ ▇";
          } else if (value > 18 && value <= 36) {
            document.getElementById("r1").innerHTML = "▁ ▂ ";
            document.getElementById("r2").innerHTML = "▃ ▅ ▆ ▇";
          } else if (value > 36 && value <= 54) {
            document.getElementById("r1").innerHTML = "▁ ▂ ▃ ";
            document.getElementById("r2").innerHTML = "▅ ▆ ▇";
          } else if (value > 54 && value <= 72) {
            document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ";
            document.getElementById("r2").innerHTML = "▆ ▇";
          } else if (value > 72 && value <= 90) {
            document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ▆ ";
            document.getElementById("r2").innerHTML = "▇";
          } else if (value > 90 && value <= 100) {
            document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ▆ ▇";
            document.getElementById("r2").innerHTML = "";
          }
        }
      }
    }

    function start() {
      if (isrun) {
        isrun = false;
        document.getElementById("switch").innerHTML = "▷";
      } else {
        isrun = true;
        document.getElementById("switch").innerHTML = "▢";
      }
    }

    window.setInterval(function () {
      getvalue();
    }, 100);
  </script>

</head>

<body class=preventcopy ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
  <div>
    <p class="title">🩸SpO2&emsp;</p>
    <p class="num"><span id="snum">--</span></p><p1>%</p1>
    <p><span id="r1" class="ruler1"></span><span id="r2" class="ruler2">▁ ▂ ▃ ▅ ▆ ▇</span></p>
    <button type="button" class="button" onclick='start()'><span id=switch>▷</span></button>
  </div>
</body>

</html>
